<template>
    <li class="recommend-shop">
        <a>
            <img :src="item.hd_thumb_url" v-if="item.hd_thumb_url">
            <h2>{{item.short_name}}</h2>
            <span class="showList-nub">￥
                         <span class="txt-nub">{{item.price}}</span>
                         <span class="txt-sales">{{item.sales_tip}}</span>
                    </span>
            <a class="discover">发现<i>></i></a>
        </a>
    </li>
</template>

<script>
    export default {
        name: "ShopList",
        props: {
            item: Object
        }
    }
</script>

<style scoped lang="stylus">
    .recommend-shop
        position relative
        background-color #fff
        font-size 14px
        margin-bottom 4px
        width 49.5%

        img
            width 100%

        h2
            color #000
            margin 10px 5px
            height: 14px
            font-size 13px
            line-height 15px
            font-weight lighter
            overflow hidden

    .recommend-shop:nth-child(2n)
        margin-left 1%

    .showList-nub
        padding-left 5px
        margin-bottom 10px
        color red
        display flex
        flex-direction row
        align-items center
        font-size 12px

    .txt-nub
        font-size 18px !important
        font-weight bold
        margin-right 3px

    .txt-sales
        color #686868 !important

    .discover
        color #444
        padding 5px 3px 5px 8px
        border 1px solid #ccc
        border-top-left-radius 25px
        border-bottom-left-radius 25px
        border-right none
        position absolute
        right 0
        bottom 5px
        font-size 12px

        i
            margin-left 3px
</style>